<template>
    <view class="list-wrapper">
        <mescroll-uni v-if="list.length > 0" ref="mescrollRef" @init="mescrollInit" :fixed="false"
            :up="{ ...upOption, noMoreSize: 4 }" @down="downRefresh" @up="getNewData">
            <uni-row class="list-container">
                <uni-col :span="12" v-for="item in list" :key="item.ID">
                    <view class="item-wrapper" @click="handleBuyBtnClick(item)">
                        <image class="image" mode="aspectFill" :src="easyGetImgUrl(item.ThumbnailUrl160)" />
                        <view class="content-wrapper">
                            <view class="name text-show-line-2">{{ item.ProductName }}</view>
                            <view class="bottom-wrapper">
                                <view>
                                    <point :minPoints="item.MinPoints" />
                                    <view v-if="item.IsPointReward > 0 && item.PointMinPrice < item.RetailMinPrice">
                                        <text class="price-text-original">零售价:￥{{ item.RetailMinPrice }}</text>
                                    </view>
                                </view>
                                <view class="buy-btn">购买</view>
                            </view>
                        </view>
                    </view>
                </uni-col>
            </uni-row>
        </mescroll-uni>
        <view class="mescroll-empty" v-else>
            <image src="/static/img/empty.png"></image>
            <view>~ 暂无数据 ~</view>
        </view>
    </view>
</template>

<script>
import point from "@/components/product/point.vue"
import { getWholeSaleListForSku } from "@/service/api/product.js"
import { getProductDisplay } from "@/utils/appInit.js"

export default {
    components: {
        point,
    },
    data() {
        return {
            list: [],
            pageNumber: 1,
            pageSize: 10,
            orderType: -1,
            displayData: {},
        }
    },
    created() {
        this.getList()
        this.getProductDisplay()
    },
    methods: {
        getList() {
            getWholeSaleListForSku({
                PageIndex: this.pageNumber,
                PageSize: this.pageSize,
                usePointType: 1,
            }).then((res) => {
                if (this.pageNumber == 1) {
                    this.list = []
                }
                if (res.State == 1 && res.Data && res.Data.Data.length) {
                    this.list.push(...res.Data.Data)
                    this.mescroll && this.mescroll.endBySize(res.Data.Data.length, res.Data.RecordAmout)
                } else {
                    this.mescroll && this.mescroll.endErr()
                }
            })
        },
        handleBuyBtnClick(item) {
            if (this.getAppSet().isHideProDetail) {
                return
            }
            if (this.getAppSet().pagesClassify) {
                this.easyGoTo(`/pages_classify/packet/product/productDetail?id=${item.ID}&InfoType=${item.SkuType}`)
            } else {
                if (this.orderType == 23) {
                    this.easyGoTo(
                        `/pages_shop/packet/product/productDetail?id=${item.ID}&InfoType=${item.SkuType}&orderType=${this.orderType}`,
                    )
                } else {
                    this.easyGoTo(`/pages_shop/packet/product/productDetail?id=${item.ID}&InfoType=${item.SkuType}`)
                }
            }
        },
        getProductDisplay() {
            getProductDisplay().then((res) => {
                if (res) {
                    this.displayData = res.Data
                }
            })
        },
        // 上拉加载
        getNewData(page) {
            this.pageNumber = page.num
            this.getList()
        },
        // 下拉刷新
        downRefresh() {
            this.mescroll.scrollTo(0, 0)
            this.mescroll.resetUpScroll()
        },
    },
}
</script>

<style lang="scss" scoped>
.mescroll-empty {
    box-sizing: border-box;
    width: 100%;
    padding: 50px 25px;
    text-align: center;

    image {
        width: 140px !important;
        height: 98px !important;
    }

    view {
        margin-top: 10px;
        font-size: 12px;
        color: gray;
    }
}

.list-wrapper {
    height: calc(100vh - 88rpx);
}

.list-container {
    margin-right: 18rpx !important;
}

.item-wrapper {
    display: flex;
    flex-direction: column;
    height: 526rpx;
    overflow: hidden;
    border-radius: 16rpx;
    margin-left: 18rpx;
    margin-top: 18rpx;
    background-color: $color-white;

    .content-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 30rpx;
        box-sizing: border-box;
    }

    .image {
        width: 100%;
        height: 348rpx;
    }

    .name {
        margin: 16rpx 16rpx 20rpx;
        font-size: 26rpx;
        color: $color-gray-1;
        font-weight: 700;
    }

    .bottom-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 16rpx;

        .price-text-original {
            color: #ccc;
        }

        .buy-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 88rpx;
            height: 44rpx;
            background: $color-blue;
            color: $color-white;
            border-radius: 22rpx;
            font-size: 24rpx;
        }
    }
}
</style>
